<template>
  <div class="page" :style="pageStyle">
    <div class="high"></div>
    <div class="content">
      <div class="title">权益人信息</div>
      <div class="form">
        <div class="item">
          <div class="tag">
            <div class="img">
              <!-- <img :src="nameIcon" class="label" alt="" /> -->
              <!-- <van-icon name="close" /> -->
              <van-icon name="user-circle-o" size="25" />
            </div>
            <span>姓名</span>
          </div>
          <div class="input">
            <input v-model="params.name" />
          </div>
        </div>
        <!--  手机号-->
        <div class="item">
          <div class="tag">
            <div class="img">
              <van-icon name="phone-circle-o" size="25" />
              <!-- <img
                :src="namePhone"
                class="label"
                alt=""
                style="width: 0.4rem"
              /> -->
            </div>
            <span>手机号</span>
          </div>
          <div class="input">
            <input v-model="params.phone" />
          </div>
        </div>
        <!--  身份证号码-->
        <div class="item">
          <div class="tag">
            <div class="img">
              <!-- <img :src="nameSfz" class="label" alt="" /> -->
              <van-icon name="notes-o" size="25" />
            </div>
            <span>身份证号</span>
          </div>
          <div class="input">
            <input v-model="params.idCard" />
          </div>
        </div>
      </div>
      <div class="btn" @click="queryData">查询权益</div>
    </div>

    <div class="content box">
      <div class="title" v-if="total > 0">请点击项目图标，预约健康检测服务</div>
      <div class="title" v-else>暂无可预约服务</div>
      <div class="items">
        <div class="single" v-for="(item, index) in data" :key="index">
          <div class="logo" @click="linkToWechat(item)">
            <img
              :src="
                item.count > 0
                  ? pngData[item.productName].active
                  : pngData[item.productName].default
              "
              alt=""
              style="width: 100%"
            />
          </div>
          <div class="productName">
            {{
              item.count > 0
                ? `${item.productName}*${item.count}`
                : item.productName
            }}
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom-box" v-for="(item, index) in pngBottom" :key="index">
        <div class="img" @click="open(index)">
          <img :src="item.icon" alt="" style="width: 100%" />
        </div>
        <div>
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="contact" @click="handlePhone">联系电话：010-59644566</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import BGPng from '@/assets/BG.png'
import IconName from '@/assets/lianxiren.png'
import IconPhone from '@/assets/shumashouji.png'
import IconSfz from '@/assets/shenfenzheng.png'

import IconChangActive from '@/assets/weichangcaise.png'
import IconChangeDefault from '@/assets/weichangzhihui.png'
import IconWuActive from '@/assets/wuailianjiancaise.png'
import IconWuDefault from '@/assets/wuailianjianzhihui.png'

import IconGong from '@/assets/gongzhonghao.png'
import IconWei from '@/assets/weixinkefu.png'
import { ImagePreview, Dialog } from 'vant'
import { queryVerification } from '@/api/user/index'
export default defineComponent({
  name: 'Home',
  methods: {
    open: index => {
      ImagePreview({
        images: [IconGong, IconWei],
        startPosition: index,
        onClose() {
          // do something
        }
      })
    },

    initData() {
      this.total = 0
      this.data = [
        {
          count: 0,
          url: '',
          productName: '胃肠联检'
        },
        {
          count: 0,
          url: '',
          productName: '五癌联检'
        }
      ]
    },

    queryData() {
      queryVerification({ ...this.params })
        .then(res => {
          if (res.code === 0) {
            this.total = res.data.availableCount
            this.data = res.data.products
            const fiveData = res.data.products.filter(
              i => i.productName === '五癌联检'
            )
            const changData = res.data.products.filter(
              i => i.productName === '胃肠联检'
            )

            let message = ''

            if (fiveData.length && !changData.length) {
              message = `您有${fiveData[0].count}份五癌联检，请”点选图标“领取预约`
            }
            if (!fiveData.length && changData.length) {
              message = `您有${changData[0].count}份胃肠联检的权益，请”点选图标“领取预约`
            }
            if (fiveData.length && changData.length) {
              message = `您有${fiveData[0].count}份五癌联检、${changData[0].count}份胃肠联检的权益，请”点选图标“领取预约`
            }

            if (res.data.availableCount > 0) {
              Dialog.alert({
                title: '权益',
                message
              }).then(() => {
                // on close
              })
            }
          }
        })
        .catch(() => {
          this.initData()
        })
    },

    handlePhone() {
      window.location.href = 'tel:010-59644566'
    },
    linkToWechat(item) {
      if (item.count > 0 && item.url) {
        window.location.href = item.url
      }
    }
  },
  data() {
    return {
      params: {
        name: '',
        phone: '',
        idCard: ''
      },
      nameIcon: IconName,
      namePhone: IconPhone,
      nameSfz: IconSfz,
      total: 0,
      pngData: {
        胃肠联检: {
          active: IconChangActive,
          default: IconChangeDefault
        },
        五癌联检: {
          active: IconWuActive,
          default: IconWuDefault
        }
      },
      pngBottom: [
        {
          icon: IconGong,
          name: '关注公众号'
        },
        {
          icon: IconWei,
          name: '咨询客服'
        }
      ],
      pageStyle: {
        backgroundImage: 'url(' + BGPng + ')',
        backgroundSize: '100%',
        backgroundRepeat: 'no-repeat'
      },
      data: [
        {
          count: 0,
          url: '',
          productName: '胃肠联检'
        },
        {
          count: 0,
          url: '',
          productName: '五癌联检'
        }
      ]
    }
  }
})
</script>

<style>
body,
html,
#app {
  width: 100%;
  min-height: 100%;
}
.page {
  width: 100%;
  min-height: 100%;
  position: absolute;
}

.page .high {
  height: 18vh;
}

.page .content {
  width: 92%;
  box-sizing: border-box;
  margin: 0 auto;
  /* margin-top: 17vh; */
  padding: 0.3rem 0.5rem;
  background: white;
  border-radius: 0.3rem;
}

.page .content .title {
  text-align: center;
  font-size: 0.5rem;
  font-weight: bold;
}

.page .content .btn {
  width: 88%;
  margin: 0 auto;
  background: #f67322;
  font-size: 0.5rem;
  padding: 5px 0;
  text-align: center;
  border-radius: 4rem;
  color: white;
}

.content .form {
  width: 100%;
  font-size: 0.44rem;
  overflow: hidden;
}

.content .form .item {
  margin: 0.3rem 0;
  box-sizing: border-box;
}

.content .form .tag {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.content .form .tag .img {
  display: flex;
  margin-right: 4px;
  align-content: center;
  justify-content: center;
}

/* .content .form .tag img {
  width: 20px;
  margin-right: 6px;
} */
.content .form .input input {
  width: 100%;
  border: none;
  padding: 2px;
  box-sizing: border-box;
  border-bottom: 1px solid #bebebe;
}

.box {
  margin-top: 2vh !important;
  background-image: linear-gradient(
    to bottom,
    #fcf2d6,
    #fdefcf 20%,
    #fce2bf 50%,
    #fcd9b2
  ) !important;
}
.box .items {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  font-size: 0.35rem;
  margin-top: 10px;
}

.box .items .single {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex: 0 0 25%;
  width: 100%;
}

.box .items div {
  text-align: center;
}

.bottom {
  margin: 20px auto;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  justify-content: center;
}

.bottom .bottom-box {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex: 0 0 22%;
  margin: 0 13px;
  font-size: 0.3rem;
  text-align: center;
}

.bottom .bottom-box .img {
  width: 100%;
}
.contact {
  text-align: center;
  font-weight: 600;
  font-size: 0.4rem;
  margin: 6px 0;
}
</style>
